
import { Component } from 'react'
import ButtonInfo from './ButtonInfo'
import { getProfile, unFollow, addFollow, profileUnload } from "../../actions/profile"
import { getArticlesByAuthor ,getArticlesByFavorite} from '../../actions/articles';
import { connect } from 'react-redux';
import Articles from '../Articles';


//用户中心
//1 username
//2 map 
//3 componentDidMount=>username =>userInfo=>store.profile
//4 ui

// const mock = {
//   profile: {
//     username: 'aa9',
//     avatar: 'https://yudafeng.github.io/static/default.png',
//     bio: 'aa9 user info',
//     email: 'aa9@qq.com',
//     following: true
//   }
// }

class Profile extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: props.match.params.username,
      tab: 1
    }
    // console.log("constructor");
  }


  //  性能优化
  // shouldComponentUpdate(nextProps, nextState) {
  //   // nextProps 是最新准确的
  //   // console.log('shouldComponentUpdate');
  //   const urlUsername = nextProps.match.params.username
  //   console.log('urlUsername', urlUsername);
  //   // console.log('profileUsername',this.props.profile.username); 

  //   console.log(this.props.profile, nextProps.profile)

  //   // aa9 - aa9
  //   if (this.props.profile.username !== urlUsername) {
  //     return true
  //   }

  //   if (this.props.profile.username === nextProps.profile.username) {
  //     return false
  //   }

  //   return true
  // }

  render() {
    const { profile, currentUser, onUnFollow, onFollow } = this.props
    const isCurrentUser = currentUser && currentUser.username === profile.username
    return (
      <div className='profile-page'>

        {/* 1.用户信息 */}

        <div className='user-info'>
          <div className='container'>
            <div className='row'>
              <div className='col-xs-12 col-md-10 offset-md-1'>
                {/* 1.1 用户基本：头像 用户名 简介 */}
                <img src={profile.avatar || "https://yudafeng.github.io/static/default.png"} style={{ width: 200, height: 200 }} />
                <h4>{profile.username}</h4>
                <p>{profile.bio}</p>
                {/* 1.2 用户行为：自己页面 编辑设置； 不是自己页面 关注/取消关注 */}
                {/*  登录用户（a） 和 profile用户(a||b) : 按钮显示*/}

                <ButtonInfo
                  isCurrentUser={isCurrentUser}
                  profile={profile}
                  follow={onFollow}
                  unfollow={onUnFollow}
                />
              </div>
            </div>
          </div>
        </div>

        {/*用户文章 */}

        <div className='container'>
          <div className="row">
            <div className="col-xs-12 col-md-10 offset-md-1">
              {/* 选项卡 */}
              <div className='aticles-toggle'>
                <ul className="nav nav-pills outline-active">
                  <li className='nav-item'>
                    <button
                      className={this.state.tab === 1 ? "nav-link active" : "nav-link"}
                      onClick={
                        () => {
                          this.setState({
                            tab: 1
                          })

                          this.props.getArticlesByAuthor(this.state.username)
                        }
                      }
                    >
                      我的文章
                    </button>
                  </li>
                  <li className='nav-item'>
                    <button
                      className={this.state.tab === 2 ? "nav-link active" : "nav-link"}
                      onClick={
                        () => {
                          this.setState({
                            tab: 2
                          })
                          this.props.getArticlesByFavorite(this.state.username)
                        }
                      }
                    >
                      喜欢文章
                    </button>
                  </li>
                </ul>
              </div>
              {/* 文章列表 */}
              <Articles
                articles={this.props.articlesReducer.articles}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }

  //用户文章

  // componentDidUpdate() {
  //   console.log('componentDidUpdate')

  //   console.log('componentDidUpdate', this.props.match.params.username)
  //   const urlUsername = this.props.match.params.username

  //   //获取profile
  //   this.props.getProfle(urlUsername)
  // }

  componentDidMount() {
    // console.log('componentDidMount');
    //获取profile
    this.props.getProfle(this.state.username)
    this.props.getArticlesByAuthor(this.state.username)
  }

}

const mapState = state => ({
  currentUser: state.user.currentUser,
  profile: state.profile,    //用户中心
  articlesReducer: state.articles
})
const mapDispatch = dispatch => ({
  getProfle: username => dispatch(getProfile(username)),
  onUnload: () => dispatch(profileUnload()),
  onUnFollow: username => dispatch(unFollow(username)),
  onFollow: username => dispatch(addFollow(username)),
  getArticlesByAuthor: username => dispatch(getArticlesByAuthor(username, 1)),
  getArticlesByFavorite: username => dispatch(getArticlesByFavorite(username,1))
})


export default connect(mapState, mapDispatch)(Profile)